<script setup>
import GlobalBackgroundPicture from "@/components/GlobalBackgroundPicture.vue";
import GlobalMaskLayer from "@/components/GlobalMaskLayer.vue";
import { fetchAllUserinfo } from "@/api/user";
import {onMounted} from "vue";
import {useHomeStore} from "@/stores/home";
import {useRouter} from "vue-router";
const useStore = useHomeStore();
const router = useRouter();

onMounted(() => {
  if (useStore.token.length !== 0 && useStore.isLoaded === false) {
    fetchAllUserinfo().then(results => {
      const [userinfo, setting, shortcuts, customWallpaper] = results
      if (userinfo.status === 'fulfilled' && userinfo.value.code === 20000) {
        useStore.userinfo = userinfo.value.retData
      }
      if (setting.status === 'fulfilled' && setting.value.code === 20000) {
        const settings = setting.value.retData
        useStore.$patch({
          shareSentence: settings.shareSentence,
          showWeather: settings.showWeather,
          timeType: settings.timeType,
          darkMode: settings.darkMode,
          smoothMode: settings.smoothMode,
          searchResultsOption: settings.searchResultsOption,
          currentWallpaperUrl: settings.wallpaper,
        })
      }
      if (shortcuts.status === 'fulfilled' && shortcuts.value.code === 20000) {
        useStore.shortcuts = shortcuts.value.retData
      }
      if (customWallpaper.status === 'fulfilled' && customWallpaper.value.code === 20000) {
        useStore.customWallpapers = customWallpaper.value.retData
      }
      useStore.isLoaded = true
    })
  }
});

const handleClose = () => {
  router.push('/')
}
</script>

<template>
  <div class="extension-page">
    <GlobalBackgroundPicture />
    <GlobalMaskLayer>
      <el-dialog
          :title="$route.meta.title"
          :model-value="true"
          @closed="handleClose"
          center
          style="border-radius: 12px"
          width="min(650px, 90%)"
      >
        <RouterView />
      </el-dialog>
    </GlobalMaskLayer>
  </div>
</template>

<style lang="less" scoped>
.extension-page {
  width: 100%;
  height: 100vh;
}
/deep/ .el-dialog {
  border-radius: 10px !important;
  overflow: hidden;
}
</style>